/*
 * @Description: 
 * @Author: handongliang dongliang.han@12301.cn
 * @Date: 2023-09-13 09:35:35
 * @LastEditTime: 2023-09-13 15:52:10
 */
import React, {useContext} from 'react';
import {CyPie} from "cysj-ui-components/es/charts";
import ReactDOM from "react-dom/client";
import {Space} from "antd";
import merge from "lodash/merge";
import {CyContext} from 'cysj-ui-components/es/basic/CyProvider'


const AutoPie: React.FC<any> = ({hideLegend, color, unit, gap, className, option, ...props}) => {
    const {state}: any = useContext(CyContext);
    const _color = state?.chart?.pie?.color || color;
    const _option = merge({
        tooltip: {
            position: [0, 0],
            backgroundColor: 'rgba(50,50,50,0)',
            borderWidth: 0,
            className: 'pie-echarts-tooltip',
            formatter(params: any) {
                const divElem = document.createElement('div');
                divElem.className = 'pie-echarts-tooltip-wrapper'
                const root = ReactDOM.createRoot(divElem);
                root.render(<div
                    className='w-full h-full bottom-0 text-center pointer-events-none flex items-center justify-center'>
                    <div>
                        <div className='text-[48px] text-[#fff] mb-8'>{params.value || 0}</div>
                        <div className='text-[28px] text-[#aaa]'>{params.name || '-'}</div>
                    </div>
                </div>)
                return divElem;
            }
        },
        legend: {
            show: false,
            right: 100
        },

    }, option)
    const _series = _option?.series
    const _data = _series && _series.length ? (_series[0].data || []) : []

    return (
        <div className={`flex ${className}`}>
            {/*<div className='w-[400px] h-[260px]'>*/}
            <div className='h-full flex-shrink-0'
                 style={{width: hideLegend ? '100%' : '33%', marginRight: hideLegend ? 0 : (gap || 0)}}>
                <CyPie
                    isAutoPlay={true}
                    option={_option}
                    {...props}
                />
            </div>
            {
                hideLegend ? '' : <div
                    className={`${_option?.legend?.orient == 'vertical' ? 'flex-grow flex flex-col justify-between' : 'flex w-full  gap-3 flex-wrap'}`}>
                    {
                        (_data || []).map((item: any, index: number) => (
                            <Space key={item.name} className='text-[28px] font-weight flex items-center'>
                                <div className={`w-[16px] h-[16px] mr-3`}
                                     style={{backgroundColor: _color[index]}}></div>
                                <div className='min-w-[160px]'>{item.name}</div>
                                <div className='min-w-[120px]'>{item.value || 0} <span>{unit}</span></div>
                            </Space>))
                    }
                </div>
            }

        </div>
    );
};

export default AutoPie;
